<template>
	<view class="self-box">
		<view class="self-box-bg"></view>
		<view class="my-box">
			<view class="top-box">
				<view class="user">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="name">
					{{userInfo.nickName}}
				</view>
				<view class="u-list">
					<view class="item">
						{{days}}
						<view class="txt">
							加入天数
						</view>
					</view>
					<view class="item">
						{{userInfo.useTimes}}
						<view class="txt">
							累积打印
						</view>
					</view>
			<!-- 		<view class="item">
						{{userInfo.score}}
						<view class="txt">
							累积积分
						</view>
					</view> -->
				</view>
			</view>
			<view class="self-list">
			<view class="item" @tap="goUrl('/pagesC/my/orderList')">
				<image src="../../static/orderlist.png" class="l-img" mode=""></image>
				<view class="txt">我的订单</view>
				<image src="../../static/arrowR.png" class="r-img" mode=""></image>
			</view>
			<!-- <view class="item" @tap="goUrl('/pagesA/gallery/myGallery')">
				<image src="../../static/mypicture.png" class="l-img" mode=""></image>
				<view class="txt">我的图库</view>
				<image src="../../static/arrowR.png" class="r-img" mode=""></image>
			</view>
			<view class="item" @tap="goUrl('/pagesA/integral/list')">
				<image src="../../static/jfrecord.png" class="l-img" mode=""></image>
				<view class="txt">积分记录</view>
				<image src="../../static/arrowR.png" class="r-img" mode=""></image>
			</view> -->
			<view class="item" @tap="goUrl('/pagesA/aftermarket/list')">
				<image src="../../static/tksh.png" class="l-img" mode=""></image>
				<view class="txt">退款/售后</view>
				<image src="../../static/arrowR.png" class="r-img" mode=""></image>
			</view>
			<!-- <view class="item" @tap="goUrl('/pagesB/myManicure/list')">
				<image src="../../static/wdmjx.png" class="l-img" mode=""></image>
				<view class="txt">我的美甲秀</view>
				<image src="../../static/arrowR.png" class="r-img" mode=""></image>
			</view> -->
			<view class="item" @tap="goUrl('/pagesB/tell/list')">
				<image src="../../static/tell.png" class="l-img" mode=""></image>
				<view class="txt">客服</view>
				<image src="../../static/arrowR.png" class="r-img" mode=""></image>
			</view>
		</view>
		</view>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabBar.vue'
	import {getMyInfo} from "@/api/user.js"
	function getDistanceSpecifiedTime(dateTime) {
	    // 指定日期和时间
	    let EndTime = new Date(dateTime);
	    // 当前系统时间
	    let NowTime = new Date();
	    let t = NowTime.getTime() - EndTime.getTime();
	    let d = Math.floor(t / 1000 / 60 / 60 / 24);
	    let h = Math.floor(t / 1000 / 60 / 60 % 24);
	    let m = Math.floor(t / 1000 / 60 % 60);
	    let s = Math.floor(t / 1000 % 60);
	    let str = d;
	    console.log(str);
		return str
	}
	export default {
		components:{
			Tabbar
		},
		data() {
			return {
				userInfo:{
					nickName: '',
					useTimes: '',
					score: ''
				},
				days: ''
			};
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			goUrl(url){
				uni.navigateTo({
					url
				})
			},
			getInfo(){
				getMyInfo().then((res) => {
					this.userInfo = res
					let start = new Date(res.createTime);
					let end = new Date();
					let timesDiff = Math.abs(end.getTime() - start.getTime());
					this.days = getDistanceSpecifiedTime(start)//timesDiff
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.self-box{
	padding-top: 88rpx;
	
}
.self-box-bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #E4919D 0%, rgba(216,216,216,0.00) 100%);
}
.my-box{
	position: relative;
	padding-bottom: 166rpx;
}
.top-box{
	margin: 0 32rpx;
	height: 320rpx;
	border-radius: 40rpx;
	background: #FFFFFF;
	box-shadow: 0px 16rpx 80rpx 0px rgba(149, 74, 85, 0.1);
	margin-bottom: 46rpx;
	.user{
		width: 128rpx;
		height: 128rpx;
		border: 2rpx solid #F3ECEF;
		border-radius: 50%;
		position: relative;
		top: -50rpx;
		left: 50%;
		margin-left: -64rpx;
		overflow: hidden;
		image{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
	}
	.name{
		font-size: 36rpx;
		color: #333333;
		margin-top: -30rpx;
		text-align: center;
	}
	.u-list{
		font-family: DINAlternate-Bold-Bold;
		font-size: 48rpx;
		color: #333333;
		display: flex;
		margin-top: 46rpx;
		.item{
			text-align: center;
			flex: 1;
		}
		.txt{
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #666666;
		}
	}
}
.self-list{
	// height: 706rpx;
	background: #FFFFFF;
	border-radius: 40rpx;
	margin: 0 32rpx;
	padding-top: 46rpx;
	padding-bottom: 30rpx;
	.item{
		color: #666666;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		border-bottom: 8rpx solid rgba(228,145,157,0.05);
		padding-bottom: 30rpx;
		.txt{
			flex: 1;
		}
		.l-img,.r-img{
			width: 48rpx;
			height: 48rpx;
		}
		.l-img{
			margin-left: 32rpx;
			margin-right: 16rpx;
		}
		.r-img{
			margin-right: 32rpx;
		}
	}
}
</style>
